<template>

  <div>
    <div>
        <el-row style="padding-top: 10px">
          <el-col :span="24">
            <!-- <span style="font-size:16px">应发合计：{{ Number(yfgzhj).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}元</span>，
            <span style="font-size:16px">实发合计：{{ Number(sfgzhj).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}元</span><br> -->
          </el-col>
        </el-row>
    </div>
    <!-- 表格部分 -->
    <el-table
      ref="singalTable"
      v-loading="listLoading"
      :data="list"
      :stripe="true"
      fit
      :height="tableHeight"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        align="center"
        width="50"
        label="序号"
      />
      <el-table-column
        label="月结状态"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.isMonthEnd | monthEndFilter() }}</span>
        </template>
      </el-table-column>  
      <el-table-column
        label="单位编码"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: left">{{ row.agencyCode }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单位名称"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: left">{{ row.agencyName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="月份"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.month }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="批次"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.isThirteen | isthirteenfilter() }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="应发工资"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: right">{{ Number(row.yfgzze).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="实发工资"
        align="center"
      >
        <template slot-scope="{row}">
          <span style="float: right">{{ Number(row.sfgzze).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <ApprovalProcess ref="app" />
  <uploadLoadSalaryMonthEnd v-if="upload_load" ref="uploadLoadSuccess" :agencyVerList="agencyVerList"  :api="'getProgressSalary'" @close="uploadClose" />
  </div>
</template>
<script>
import {
  getSalaryMonthEndPage,
  getSalaryMonthHistoryPage,
  getSalaryMonthEndStopPage,
  saveMonthEnd,
  saveMonthEndStop,
  checkRevokeMonthEnd,
  checkRevokeMonthEndStop,
  revokeMonthEndStop,
  revokeMonthEnd,
  outPutSalaryList,
  // getSalaryMonthEndSum
} from '@/api/financialAudit/salaryMonthEnd' // secondary package based on el-pagination
import uploadLoadSalaryMonthEnd from './uploadLoadSalaryMonthEnd'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'
import ApprovalProcess from '@/components/ApprovalProcess/ApprovalProcess'


export default {
  name: 'SalaryMonthEnd',
  components: { ApprovalProcess, Pagination, tableEmpty, uploadLoadSalaryMonthEnd},
  filters: {
    isthirteenfilter(value){
      if (value === 0) {
        return '每月工资'
      }
      return "第"+(1+value)+"批次工资"
    },
    monthEndFilter(type) {
      if (type === '0') {
        return '未月结'
      } else if (type === '1') {
        return '已月结'
      }else if (type === '2') {
        return '暂存'
      }
    }
  },
  props: ['tabPane', 'treeData', 'month'],
  data() {
    return {
      tableHeight: null,
      list: null,
      total: 0,
      guid:'',
      loading: true,
      yfgzhj:'0.00',
      sfgzhj:'0.00',
      upload_load: false,
      listLoading: true,
      agencyVerList:[],
      params:[],
      listQuery: {
        page: 1,
        limit: 500,
        flag: '0',
        agencyId: '0',
        month: '',
        isThirteenChange: ''//查询条件，多批次还是每月工资
      },
      formData: {
        agencyIds: []
      }
    }
  },
  watch: {
    list(val) {
      this.doLayout()
    },
    month(val) {
      this.listQuery.page = 1
      this.getList()
    }
  },
  created() {
    this.listQuery.page = 1
    this.listQuery.flag = this.tabPane
    if (this.treeData !== '' && this.treeData.length > 0) {
      this.listQuery.agencyId = this.treeData.id
    }
    this.getList()
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 审核日志
    processnode() {
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.$refs.app.getList(selection[0].agencyId)
    },
 
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 220
    },
    getList() {
      this.listLoading = true
      // this.getMonthEndSum()
      if (this.listQuery.flag === '0') {
        getSalaryMonthEndPage(this.listQuery).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
      } else if (this.listQuery.flag === '1') {
        this.listQuery.month = this.month
        getSalaryMonthHistoryPage(this.listQuery).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
      }else if (this.listQuery.flag === '2') {
        this.listQuery.month = this.month
        getSalaryMonthEndStopPage(this.listQuery).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
      }
    },
    handleFilter() {
      this.getList()
    },
    handleTree(data) {
      this.listQuery.agencyId = data.id
      this.listQuery.page = 1
      // this.listQuery.limit = 10
      this.getList()
    },
    // 月结
    saveMonthEnd() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要月结的单位',
          type: 'warning',
          duration: 4000
        })
        this.$emit('monthEndCallback')
        return
      }
    
 
      
      // 操作单位列表
      this.agencyVerList = []
      selection.forEach(item => {
        const current = {}
        current['agencyId'] = item.agencyId
        current['bizKey'] = item.bizKey
        this.agencyVerList.push(current)
      })
        //  this.upload_load = true
          this.$msgbox({
          title: '是否确认月结',
          // dangerouslyUseHTMLString: true,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
             
            if (action === 'confirm') {
              done();
              this.upload_load = true
              
              // this.makeSalaryData() // 进度条同时，调用接口
            } else {
             done();
               instance.confirmButtonLoading = false;
              this. uploadClose()
              // done();
            }
          }
        }).then(action => {
          //  done();
          // this.$message({
          //   type: 'info',
          //   message: 'error: ' + action
          // });
        });
    },
         uploadClose() {
      this.upload_load = false
       this.$emit('monthEndCallback')
      // this.listQuery.agencySelected=''//批量生成完后清空选择值，再调查询方法，否则会报414
      // this.getMessage()
       this.handleFilter()
     
    },
    // saveMonthEndStop() {
     
    //    const selection = this.$refs.singalTable.selection
    //   if (selection.length === 0) {
    //     this.$message({
    //       showClose: true,
    //       message: '请选择要暂存的单位',
    //       type: 'warning',
    //       duration: 4000
    //     })
    //     return
    //   }
    //     this.agencyVerList = []
    //   selection.forEach(item => {
    //     const current = {}
    //     current['agencyId'] = item.agencyId
    //     current['bizKey'] = item.bizKey
    //     this.agencyVerList.push(current)
    //   })
    //   console.log(this.agencyVerList)
    //   saveMonthEndStop(this.agencyVerList).then(response => {
    //     this.$message({
    //       showClose: true,
    //       message: '暂存成功',
    //       type: 'success',
    //       duration: 4000
    //     })
    //     this.getList()
    //     this.$emit('monthEndStopCallback')
    //     this.listQuery.page = 1
      
    //   })
    //     .catch(() => {
    //        this.uploadClose();
    //         this.handleFilter()
    //       this.$emit('monthEndStopCallback')
    //     })
    // },
    // 撤销月结
    revokeMonthEnd() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销月结的数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeMonthEndCallback')
        return
      }
      const operateAgencyId = []
      let month = ''
      selection.forEach(item => {
        operateAgencyId.push(item.agencyId)
        month = item.month
      })
      // 校验是否可以撤销月结
      const params = { 'month': month, 'agencyIds': operateAgencyId.join(',') }
      checkRevokeMonthEnd(params).then((response) => {
        if (response.data.flag === false) {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeMonthEndCallback')
        } else if (response.data.flag === true) {
          const data = { 'month': month, 'agencyIds': operateAgencyId }
          revokeMonthEnd(data).then((response) => {
            this.$message({
              showClose: true,
              message: '撤销月结成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeMonthEndCallback')
            this.listQuery.page = 1
            this.handleFilter()
          }).catch(() => {
            this.$emit('revokeMonthEndCallback')
          })
        }
      }).catch(() => {
        this.$emit('revokeMonthEndCallback')
      })
    },
    
    // 撤销暂存
    // revokeMonthEndStop() {
    //   const selection = this.$refs.singalTable.selection
    //   if (selection.length === 0) {
    //     this.$message({
    //       showClose: true,
    //       message: '请选择要撤销暂存的数据',
    //       type: 'warning',
    //       duration: 4000
    //     })
    //     this.$emit('revokeMonthEndStopCallback')
    //     return
    //   }

    //   if (selection.length >= 2) {
    //     this.$message({
    //       showClose: true,
    //       message: '请选择一条要撤销的数据',
    //       type: 'warning',
    //       duration: 4000
    //     })
    //     this.$emit('revokeMonthEndStopCallback')
    //     return
    //   }
    //   const operateAgencyId = []
    //   let month = ''
    //   selection.forEach(item => {
    //     operateAgencyId.push(item.agencyId)
    //     month = item.month
    //   })
    //   // 校验是否可以撤销暂存
    //   const params = { 'month': month, 'agencyIds': operateAgencyId.join(',') }
    //   checkRevokeMonthEndStop(params).then((response) => {
    //     if (response.data.flag === false) {
    //       this.$message({
    //         showClose: true,
    //         message: response.data.message,
    //         type: 'warning',
    //         duration: 4000
    //       })
    //       this.$emit('revokeMonthEndStopCallback')
    //     } else if (response.data.flag === true) {
    //       const data = { 'month': month, 'agencyIds': operateAgencyId }
    //       revokeMonthEndStop(data).then((response) => {
    //         this.$message({
    //           showClose: true,
    //           message: '撤销暂存成功',
    //           type: 'success',
    //           duration: 4000
    //         })
    //         this.$emit('revokeMonthEndStopCallback')
    //         this.listQuery.page = 1
    //         this.handleFilter()
    //       }).catch(() => {
    //         this.$emit('revokeMonthEndStopCallback')
    //       })
    //     }
    //   }).catch(() => {
    //     this.$emit('revokeMonthEndStopCallback')
    //   })
    // },

    // 导出
    outPutFile() {
      outPutSalaryList(this.listQuery).then(response => {
        const link = document.createElement('a')
        const objectUrl = URL.createObjectURL(response)
        link.href = objectUrl
        link.download = '月结数据.xlsx'
        link.click()
        URL.revokeObjectURL(objectUrl)
      })
    },
    // getMonthEndSum() {
    //   getSalaryMonthEndSum(0, 1)
    //     .then(res => {
    //       this.yfgzhj = res.data.YFGZHJ
    //       this.sfgzhj = res.data.SFGZHJ
    //     })
    //     .catch(() => {
    //       this.yfgzhj = '0.00'
    //       this.sfgzhj = '0.00'
    //     })
    // }
  }
}
</script>
